<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>火灾事故认定说明记录</h1>
      </div>
      <div class="text">
        <span>说明地点：</span>
        <input v-model="tableData.explainAddress" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="width:380px" class="custom_input" type="text">
        <span> 日期：</span>
        <input v-model="tableData.explainTime" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="width:195px" class="custom_input" type="date">
      </div>
      <p class="text" flex>
        <span style="width:120px">说明人姓名：</span>
        <input v-model="tableData.explainPersonnelJson[0].name" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="width:150px" class="custom_input" type="text">
        <span>单位及职务：</span>
        <input v-model="tableData.explainPersonnelJson[0].duty" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="flex:1" class="custom_input" type="text">
      </p>
      <p class="text" flex>
        <span style="width:120px;text-indent:3em">姓名：</span>
        <input v-model="tableData.explainPersonnelJson[1].name" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="width:150px" class="custom_input" type="text">
        <span>单位及职务：</span>
        <input v-model="tableData.explainPersonnelJson[1].duty" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="flex:1" class="custom_input" type="text">
      </p>
      <p class="text" flex>
        <span style="width:120px">记录人姓名：</span>
        <input v-model="tableData.recorderJson.name" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="width:150px" class="custom_input" type="text">
        <span>单位及职务：</span>
        <input v-model="tableData.recorderJson.duty" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="flex:1" class="custom_input" type="text">
      </p>
      <p class="text" flex>
        起火单位：
        <input v-model="tableData.fireUnit" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="text">
        报警时间：
        <input v-model="tableData.alarmTimeDate" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" style="flex:1" type="date">
        <input v-model="tableData.alarmTimeTime" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" style="flex:1" type="time">
      </p>
      <p class="text" flex>起火地址（单位）：
        <input v-model="tableData.fireAddress" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" style="flex:1" class="custom_input" type="text">
      </p>
      <div class="text">
        到场当事人姓名、单位或住址、联系电话：
        <div>
          <textarea v-if="patternIsEdit" v-model="tableData.presentPersonnel" :readonly="!patternIsEdit" style="width:100%;border:solid 2px" rows="5" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" />
          <span v-else class="custom_input" style="white-space: break-spaces;display:inline">{{ tableData.presentPersonnel }}</span>
        </div>
      </div>
      <div class="text">
        未到场当事人姓名、单位或住址：
        <div>
          <textarea v-if="patternIsEdit" v-model="tableData.noPresentPersonnel" :readonly="!patternIsEdit" style="width:100%;border:solid 2px" rows="5" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" />
          <span v-else class="custom_input" style="white-space: break-spaces;display:inline">{{ tableData.noPresentPersonnel }}</span>
        </div>
      </div>
      <div class="text">
        未到场原因：
        <div>
          <textarea v-if="patternIsEdit" v-model="tableData.noPresentReason" :readonly="!patternIsEdit" style="width:100%;border:solid 2px" rows="5" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" />
          <span v-else class="custom_input" style="white-space: break-spaces;display:inline">{{ tableData.noPresentReason }}</span>
        </div>
      </div>
      <div class="text">
        说明内容：根据《火灾事故调查规定》第三十一条的规定，现将我
        <input v-model="tableData.unit" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="text">
        拟认定的
        <input v-model="tableData.fireUnit" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="text">
        火灾事故的起火原因说明如下：
        <div>
          <textarea v-if="patternIsEdit" v-model="tableData.confirmInfo" :readonly="!patternIsEdit" style="width:100%;border:solid 2px" rows="5" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" />
          <span v-else class="custom_input" style="white-space: break-spaces;display:inline">{{ tableData.noPresentReason }}</span>
        </div>
      </div>
      <div class="text">
        问：对上述说明内容，你（们）是否听清楚了？ <br>
        答：<input v-model="tableData.secondaryConfirmation" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="text"><br>
        问：对上述说明内容，你（们）是否有意见？ <br>
        答：<input v-model="tableData.otherOpinion" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="text">
      </div>
      <div class="text" flex="main:justify">
        <div>
          到场当事人签名：<input v-model="tableData.presentSigns" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="text">
        </div>
        <input v-model="tableData.signTime" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="date">
      </div>
      <div class="text">
        说明人签名：<input v-model="tableData.explainPersonnelSigns" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit" class="custom_input" type="text">
      </div>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->
    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  data() {
    const explainPersonnelJson = Array.from({ length: 2 }).map(item => {
      return {
        name: undefined,
        duty: undefined
      }
    })
    const recorderJson = {
      name: undefined,
      duty: undefined
    }
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/confirmationInfo',
      tableData: {
        'alarmTime': parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
        'alarmTimeDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'alarmTimeTime': parseTime(new Date(), '{h}:{i}'),
        'archivesId': 0,
        'confirmInfo': 'string',
        'explainAddress': 'string',
        'explainPersonnel': '',
        explainPersonnelJson,
        'explainPersonnelSigns': 'string',
        'explainTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'fireUnit': 'string',
        'flag': 0,
        'id': 0,
        'noPresentPersonnel': 'string',
        'noPresentReason': 'string',
        'otherOpinion': 'string',
        'presentPersonnel': 'string',
        'presentSigns': 'string',
        'recorder': 'string',
        recorderJson,
        'secondaryConfirmation': 'string',
        'signTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'title': 'string',
        'unit': 'string'
      }
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.title = '火灾事故认定说明记录'

      formData.alarmTimeDate = parseTime(formData.alarmTime, '{y}-{m}-{d}')
      formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
      formData.signTime = parseTime(formData.signTime, '{y}-{m}-{d} {h}:{i}:{s}')
      formData.explainTime = parseTime(formData.explainTime, '{y}-{m}-{d} {h}:{i}:{s}')
      formData.explainPersonnelJson = JSON.stringify(formData.explainPersonnel)
      formData.recorderJson = JSON.stringify(formData.recorder)
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const formData = res.data

        formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
        formData.signTime = `${formData.signTime} 00:00:00`
        formData.explainTime = `${formData.explainTime} 00:00:00`
        formData.explainPersonnel = JSON.stringify(formData.explainPersonnelJson)
        formData.recorder = JSON.stringify(formData.recorderJson)
        // const [alarmTimeDate, alarmTimeTime] = this.tableData.alarmTime.split(' ')
        // this.tableData.alarmTimeDate = alarmTimeDate
        // this.tableData.alarmTimeTime = alarmTimeTime
      })
    }

  }
}
</script>

